<div class="row">
  <div class="col-md-3">
    <nb-card size="tiny" status="primary">
      <nb-card-header style="color:white">本月充值</nb-card-header>
      <nb-card-body>32,790<i class="fa fa-yen-sign"></i></nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-3">
    <nb-card size="tiny" status="info">
      <nb-card-header style="color:white">本月消耗</nb-card-header>
      <nb-card-body>42,307<i class="fa fa-yen-sign"></i></nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-3">
    <nb-card size="tiny" status="warning">
      <nb-card-header style="color:white">待缴金额</nb-card-header>
      <nb-card-body>34,108<i class="fa fa-yen-sign"></i></nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-3">
    <nb-card size="tiny" status="danger">
      <nb-card-header style="color:white">欠款金额</nb-card-header>
      <nb-card-body>35,146<i class="fa fa-yen-sign"></i></nb-card-body>
    </nb-card>
  </div>
</div>
<nb-card>
  <nb-card-header>条件筛选</nb-card-header>
  <nb-card-body>
    <input nbInput class="margin" placeholder="单元ID" [(ngModel)]="unitId">
    <input nbInput class="margin" placeholder="账单号" [(ngModel)]="billNo">
    <input nbInput class="margin" placeholder="账单类型" [(ngModel)]="billType">
    <input nbInput class="margin" placeholder="账单状态" [(ngModel)]="billStatus">
    <input nbInput class="margin" placeholder="Start Time" [nbDatepicker]="startPicker" [(ngModel)]="startTime">
    <nb-datepicker #startPicker format="yyyy-MM-dd"></nb-datepicker>
    -
    <input nbInput class="margin" placeholder="End Time" [nbDatepicker]="endPicker" [(ngModel)]="endTime">
    <nb-datepicker #endPicker format="yyyy-MM-dd"></nb-datepicker>
    <button nbButton class="margin" shape="rectangle" status="success" (click)="filter()">查询</button>
  </nb-card-body>
</nb-card>

<nb-card>
  <nb-card-header>
    单元账单
  </nb-card-header>

  <nb-card-body>
    <button nbButton class="margin" (click)="openAddPrompt()">人工录入</button>
    <button nbButton class="margin" (click)="openPayPrompt()">人工缴费</button>
    <ng2-smart-table [settings]="settings" [source]="source">
    </ng2-smart-table>
  </nb-card-body>
</nb-card>
<ng-template #dialog let-ref="dialogRef">
  <nb-card style="min-width:800px">
    <nb-card-header>缴费录入</nb-card-header>
    <nb-card-body>
      <div class="form-group">
        <label>账单编号</label>
        <input nbInput class="form-control" #billNo>
        <label>缴费金额</label>
        <input nbInput class="form-control" #billAmt>
        <label>标注</label>
        <input nbInput class="form-control" #remark>
      </div>
    </nb-card-body>
    <nb-card-footer>
      <button nbButton class="margin" status="danger" (click)="ref.close()">取消</button>
      <button nbButton class="margin" status="success" (click)="ref.close({'billNo':billNo.value,'billAmt':billAmt.value,'remark':remark.value})">确定</button>
    </nb-card-footer>
  </nb-card>
</ng-template>
